<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
    form标签:对应一个表单区域，表单区域里可以放多个表单元素
           常用属性:
                action属性:当表单提交之后,会将表单的数据交给谁来处理
                method属性:表单的提交方式,get(默认)、post
                    get方式:在浏览器中地址栏中可以看到，以查询字符串的格式提交数据，key=value&key=value
                    post方式:在浏览器中地址栏中看不到，可以打开network

                enctype属性:属性规定在发送到服务器之前应该如何对表单数据进行编码。
                        ation/x-www-form‐urlencoded默认值, 表示使用正常的数据传输,  以字符串的方式进行传输
                        multiapplicpart/form-data 以二进制流的方式进行传输, 一般用于文件上传,此时的请求方式必须是post
                        text/plain,普通文本

    大多数表单元素使用<input type="表单元素的类型">
        type属性:
            text:单行文本框
                常用属性:
                    name属性:很重要
                    maxLength:最大输入字符数
                    size:控制组件的宽度
                    value:文本框默认值，可以省略
                    placeholder:提示文字, 在表单中展示一个提示的说明
                    required必填
                    readonly:只读，readonly="readonly",简写为readonly
                    disabled:禁用，完全不能用，disabled="disabled",简写为disabled
                    注意：readonly数据时可以提交的，但是disabled数据时不能被提交的
            password:密码框
            radio:单选按钮
                常用属性：
                    name属性，单选按钮的name属性的值必须保持一致才能实现互斥(单选)功能
                    value属性
                    checked,checked="checked",简写为checked， 设置谁默认被选中
           checkbox 复选框
                常用属性与radio相似
           file:文件选择器
                常用属性：
                    name属性
                    accept属性：限制上传的文件的格式
                        纯文本
                            text/plain:普通文本
                            text/html:htm文本
                            text/css:css文本
                            text/xxx:xxx文本
                            text/*:所有文本
                            该方式存在浏览器兼容问题
                            火狐可以识别图片,谷歌无法识别图片
                        图片
                            image/jpeg
                            image/png
                            image/gif
                            image/*:所有图片
            submit 提交按钮，点击之后表单进行提交
            reset 重置按钮，恢复到原始的默认状态
            button 普通按钮，默认无任何功能
            image 图像按钮，提交功能
    -->


    <form action="success.html" method="post" enctype="text/plain">
        用户名:<input type="text" name="username"  maxlength="30" size="30" required placeholder="请输入用户名" >
        <br>
        地址:<input type="text" name="address" value="南京" readonly>
        <br>
        密码:<input type="password" name="password">
        <br>
        性别:
        <input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female" checked>女
        <br>
        爱好:
        <input type="checkbox" name="hobby"   value="basketball">打篮球
        <input type="checkbox" name="hobby" checked value="music">听音乐
        <input type="checkbox" name="hobby" checked value="reading">看书
        <br>
        上传头像:
        <input type="file" accept="text/html,image/png" name="pic">
        <br>
        <input type="submit" value="注册">
        <input type="reset" value="重置按钮">
        <input type="button" value="普通按钮">
        <input type="image" src="../images/submit.png" style="width:90px;">
    </form>

</body>
</html>